<template>
	<div class="theApp">
		<div class="theTop">
			<pageNav></pageNav>
		</div>
		<div class="theMain">
			<router-view />
		</div>
		<div class="theFooter">
			底部内容
		</div>
	</div>

</template>
<script>
	import pageNav from "@/components/pageNav.vue"
	export default {
		// 2.注册组件
		components: {
			pageNav
		},
		data() {
			return {}
		},
		created() {
			console.log(this.$router)
			console.log(this.$route)
		}
	}
</script>

<style scoped>
	.theApp {
		padding: 10px;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.theTop {
		padding: 10px 0;
		background-color: bisque;
	}

	.theMain {
		flex: 1;
		background-color: #ffece2;
	}

	.theFooter {
		padding: 10px;
		background-color: aliceblue;
	}
</style>